<template>
	<view class="markSlide">
		<!-- <u-swipe-action style="margin: 20rpx 0;" :show="item.show" :index="index" v-for="(item, index) in listData"
			:key="item.id" @click="click(item)" @open="open" :options="options">
			<view class="now-message-info" hover-class="uni-item--hover">

			</view>
		</u-swipe-action> -->
		<view class="swipe-action" v-for="(item, index) in listData">
			<view class="contentBox" @click.stop="selectAddress(item)">
				<view class="topContent">
					<view class="defaultAddressIcon" v-if="Number(item.isDefault)==1">默认</view>
					<view class="detailedAddress">{{item.detailAddress}}</view>
				</view>
				<view class="bottomContent">
					<view class="shipName">{{item.shipName}}</view>
					<view class="shipPhone">{{item.shipPhone}}</view>
				</view>
			</view>
			<view class="editBtn" @click.stop="clickItemMethod(item)"><u-icon name="edit-pen" color="#000000"
					size="40"></u-icon></view>
			<view class="editBtn" @click.stop="click(item)"><u-icon name="trash" color="#000000"
					size="40"></u-icon></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mark-slide-list1",
		data() {
			return {
				listData: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		props: {
			list: { //数据list
				type: Array,
				default () {
					return [];
				}
			},
		},
		watch: {
			list: {
				handler: function(val, oldval) {
					//console.log('val', val);
					//console.log('oldval', oldval);
					this.listData = val.map((item) => {
						return {
							show: false,
							...item,
						}
					})
				},

				deep: true
			}
		},
		methods: {
			click(item) {
				console.log(item, 'index');
				this.$emit('delAddress', item)
				// if (index1 == 1) {
				// 	this.list.splice(index, 1);
				// 	this.$u.toast(`删除了第${index}个cell`);
				// } else {
				// 	this.list[index].show = false;
				// 	this.$u.toast(`收藏成功`);
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.listData[index].show = true;
				this.listData.map((val, idx) => {
					if (index != idx) this.listData[idx].show = false;
				})
			},
			
			clickItemMethod(item) {
				// @delAddress
				this.$emit('editclick', item)
			},
			selectAddress(item) {
				//console.log(item,'item');
				this.$emit("selectAddress", item)
			},
		}
	};
</script>

<style lang="scss" scoped>
	// .markSlide{
	// 	::v-deep u-swipe-action-item,

	// }
	::v-deep .u-swipe-action-item {
		margin-bottom: 16rpx !important;
	}

	.swipe-action {
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.contentBox {

			.topContent,
			.bottomContent {
				display: flex;
				align-items: center;

			}

			.topContent {
				.defaultAddressIcon {
					width: 68rpx;
					height: 36rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					background: linear-gradient(103.63deg, #3F3F3F 3.77%, #535353 106.29%);
					border: 2rpx solid #1F1F1F;
					border-radius: 0 8rpx 0 8rpx;
					text-align: center;
					line-height: 36rpx;
					margin-right: 16rpx;
					overflow: hidden;
				}

				.detailedAddress {
					width: 368rpx;
					font-size: 32rpx;
					line-height: 32rpx;
					letter-spacing: 1rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
			}

			.bottomContent {
				font-size: 26rpx;
				margin-top: 28rpx;

				.shipName {
					color: #3F3F3F;
					margin-right: 16rpx;
				}

				.shipPhone {
					color: #B1B1B1;
				}
			}
		}

	}
</style>